/* Original Styles */
.skills {
  font-family: "Arial", sans-serif;
  background-color: rgba(17, 16, 16, 0.1);
  padding: 2rem 0;
}


.skills-text {
  margin-bottom: 2rem;
}

.skills__container {
  display: flex; /* Use flexbox instead of grid to align items in a row */
  justify-content: space-around; /* Distributes space evenly around items */
  align-items: start; /* Aligns items at the start of the flex line */
}
.skills__category {
  display: flex;
  flex-direction: column; /* Stack the items vertically */
  align-items: center; /* Align items centrally within each category */
  flex-grow: 1; /* Allows each category to fill the space evenly */
  margin: 0 10px; /* Adds some horizontal spacing between categories */
}

.skills__data {
  width: 100%; /* Ensures all skill blocks use full width of the category */
  margin-bottom: 1rem; /* Adds some space between each skill block */
}
.iconify {
  margin-right: 10px; /* Space between icon and text */
}

.skills__name {
  text-align: center; /* Centers the skill text */
}

.skills__data:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
}

.skills__data:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15),
    0 0 8px 4px rgba(255, 255, 255, 0.2);
}

.skills__data::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #009688;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.skills__data:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  background-color: #f25f5c;
}

.skills__names {
  display: flex;
  align-items: center;
}

.skills__name {
  margin-left: 1rem;
  font-size: 1rem;
  font-weight: 600;
  transition: color 0.3s ease; /* Added transition for color */
}

.text-highlight-2 {
  color: #f25f5c;
}

/* New Animations and Styles */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.skills {
  animation: fadeIn 1s ease-in-out forwards;
}

.skills__icon {
  transition: transform 0.3s ease;
}

.skills__data:hover .skills__icon {
  transform: rotate(15deg);
}

.skills__data:hover .skills__name {
  color: #f25f5c;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.skills__background-element {
  animation: float 3s infinite ease-in-out;
}

.skills__data:hover {
  box-shadow: 0 10px 20px rgba(242, 95, 92, 0.3);
}